<template>
  <div class="mySwitch">
    <el-switch
      v-model="childModel"
      :ref="switchRef"
      :disabled="disabled"
      :active-color="configDefault.activeColor"
      :inactive-color="configDefault.inactiveColor"
      :active-icon-class="configDefault.activeIconClass"
      :inactive-icon-class="configDefault.inactiveIconClass"
      :active-text="configDefault.activeText"
      :inactive-text="configDefault.inactiveText"
      :active-value="configDefault.activeValue"
      :inactive-value="configDefault.inactiveValue"
      :validate-event="configDefault.validateEvent"
      :width="configDefault.width"
      :name="configDefault.name"
      @change="switchChange(childModel)"
    ></el-switch>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "mySwitch",
  props: {
    //自定义ref
    switchRef: {
      type: [Number, String],
      default() {
        return "vueSwitch";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组switch框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: false,
      configDefault: {
        activeValue: true, // switch 打开时的值 [Boolean, String, Number]
        inactiveValue: false, // switch 关闭时的值 [Boolean, String, Number]
        // switch 打开时的背景色
        activeColor: "#409EFF",
        // switch 关闭时的背景色
        inactiveColor: "#C0CCDA",
        // switch 打开时所显示图标的类名，设置此项会忽略 active-text
        activeIconClass: "",
        // switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text
        inactiveIconClass: "",
        // switch 打开时的文字描述
        activeText: "",
        // switch 关闭时的文字描述
        inactiveText: "",
        // 改变 switch 状态时是否触发表单的校验
        validateEvent: true,
        // switch 的宽度（像素）
        width: 40,
        name:""
      },
    };
  },
  watch: {
    childModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (val !== this.childModel) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.childModel = this.model ? this.model : 0;
  },
  mounted() {},
  methods: {
    // switch 状态发生变化时的回调函数
    switchChange: function (newVal) {
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
  },
};
</script>

<style lang="less">
.mySwitch {
}
</style>
